import React ,{useState}from 'react'
import Logo from '../assets/images/index/logo.png';
import User from '../assets/images/index/user.png';
import Shoucang from '../assets/images/test/shoucang.png';
import Shoucang1 from '../assets/images/test/shoucang1.png';
import { Progress, Statistic,  Modal } from 'antd';
import { useNavigate } from 'react-router-dom';
const { Countdown } = Statistic;
const deadline = Date.now() + 1000 * 60 * 60;
export default function startTest() {
  const onFinish = () => {
    console.log('finished!');
  };
  const navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    navigate('/end')
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <div className='toubu'>
        <img src={Logo} alt="" style={{ marginLeft: 360 }} />
        <div style={{ fontSize: 20, color: '#fff', marginRight: 600 }}>前端第一阶段考试</div>
        <div>
          <img src={User} alt="" />
          <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
        </div>
      </div>
      <div style={{ display: 'flex', width: 1200, marginTop: 20 }} className='m0'>
        <div className='left'>
          <div style={{ marginTop: 15, marginLeft: 25 }}>
            <span style={{ fontSize: 18, color: '#333333' }}>答题卡</span>
          </div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>单选题（共10题，合计20分）</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 15 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}><img src={Shoucang} alt="" style={{ width: 7, height: 7 }} /></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>4</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>5</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>6</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>7</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>8</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>9</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>10</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div className='startcutter'></div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>多选题（共10题，合计20分）</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>1</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>2</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#6966eb', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#fff', fontSize: 12 }}>3</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>4</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>5</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>6</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>7</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>8</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>9</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>10</span></div>
              <div style={{ width: 20, height: 15, backgroundColor: '#f1f3f8', display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}></div>
            </div>
          </div>
          <div className='leftBottom'>
            <div style={{ width: 10, height: 10, backgroundColor: '#726fff', marginLeft: 60 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>已答</div>
            <div style={{ width: 10, height: 10, backgroundColor: '#f1f3f8', marginLeft: 6 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>未答</div>
            <div style={{ marginLeft: 8 }}><img src={Shoucang} alt="" style={{ width: 12, height: 12 }} /></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>收藏</div>
          </div>
        </div>
        <div className='centercontent'>
          <div className='centertop'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>单选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#fe8545', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>3.题目3</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='centertop'>
            <span style={{ fontSize: 20, color: '#333333', marginLeft: 20 }}>多选题（共10题，合计20分）</span>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>1.题目1</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='centercutter'></div>
          </div>
          <div className='questions'>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 16, color: '#333333' }}>2.题目2</div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <img src={Shoucang1} alt="" style={{ width: 15, height: 15 }} />
                <span style={{ color: '#333', fontSize: 12, marginLeft: 5 }}>收藏</span>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
              <div className='duoxuan'></div>
              <div>C.正面朝向对方</div>
            </div>
          </div>
        </div>
        <div className='rightcontent'>
          <div style={{ fontSize: 14, color: '#333', marginTop: 10 }}>剩余时间</div>
          <div> <Countdown value={deadline} onFinish={onFinish} /></div>
          <div className='rightcutter'></div>
          <div style={{ fontSize: 14, color: '#333', marginTop: 10, marginBottom: 10 }}>当前进度</div>
          <div style={{ fontSize: 14, color: '#333' }}>3/10</div>
          <div style={{ width: '80%' }} className='m0'><Progress percent={30} showInfo={false}></Progress></div>
        </div>
        <button className='rightbutton1' onClick={showModal}>提交试卷</button>
      </div>
      <div className='footer'>
        Copyright © 2021  成都蜗牛创想科技有限公司
      </div>
      <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      有试题未完成，是否现在交卷？
      </Modal>
    </div>
  )
}
